<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>网络收藏夹|登录</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        * {
            user-select: none;
        }

        .bg{
            position: fixed;
            top: 100px;
            left: 0;
            right: 0;
            bottom: 100px;
            background: #009688;
        }

        .loginTitle{
            margin-top: 20px;
            margin-left: 15px;
            background: #fff;
            font-weight: bold;
            font-size: 18px;
        }

        .loginDiv{
            z-index: 999;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
        }

        .loginFooter{
            position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
            height: 44px;
            line-height: 44px;
        }

        .zylVerCode{
            font-size: 22px;
            background: #eee;
            display: inline-block;
            width: 70px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>
<body>
<blockquote class="layui-elem-quote loginTitle">在线网络收藏夹</blockquote>
<div class="bg" id="particles-js"></div>
<div class="layui-tab layui-tab-brief loginDiv">
    <ul class="layui-tab-title">
        <li class="layui-this">登录</li>
        <li>注册</li>
        <li>忘记密码</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <!-- 登录表单 -->
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="checkbox" name="remember" value="1" title="两周内自动登录" lay-skin="primary">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <!-- 注册表单 -->
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required|username"
                               placeholder="输入6~18个字符，字母、数字、下划线"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设置密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" id="password" required lay-verify="required|password"
                               placeholder="输入6~16个字符，区分大小写"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="email" name="email" id="register-email" required lay-verify="required|email|exitEmail"
                               placeholder="输入您的邮箱" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline" style="width:170px;">
                        <input type="text" name="code" required lay-verify="required" placeholder="请输入验证码"
                               autocomplete="off" class="layui-input">
                    </div>
                    <input type="button" class="layui-btn layui-btn-sm" style="margin-top:4px;width: 90px;" onclick="sendEmailCode(this)" value="获取验证码">
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register">注册</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <!-- 忘记密码 -->
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">登陆账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required"
                               placeholder="请输入登陆账号"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="email" name="email" required lay-verify="required|email"
                               placeholder="请输入邮箱"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline" style="width: 190px;">
                        <input type="text" name="code" required lay-verify="required|zylVerCode"
                               placeholder="请输入验证码"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                    <span class="zylVerCode" onclick="zylVerCode()"></span>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="forgotPwd">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="loginFooter">
    © 2020 在线网络收藏夹 || 在线网络收藏夹版权所有
</div>
<script src="layui/jquery-3.1.1.min.js"></script>
<script src="layui/layui.js"></script>
<script src="layui/particles.min.js"></script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'form', 'layer'], function () {
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;

        /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
        particlesJS.load('particles-js', 'layui/particles.json', function() {
          console.log('callback - particles.js config loaded');
        });

        //监听提交
        form.on('submit(login)', function (data) {
            layer.load();
            $.ajax({
                type: "POST",
                url: "login?remember=" + data.field.remember,
                data: JSON.stringify(data.field),
                contentType: 'application/json;charset=utf-8',
                dataType: "json",
                success: function (result) {
                    layer.closeAll('loading');
                    if (result.code == 0) {
                        window.location.href = "index.html";
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                },
                error: function () {
                    layer.closeAll('loading');
                    layer.msg("服务器异常", {icon: 2});
                }
            });
            return false;
        });

        form.on('submit(forgotPwd)', function (data) {
            layer.load();
            $.ajax({
                type: "POST",
                url: "login/forgot",
                data: JSON.stringify(data.field),
                contentType: 'application/json;charset=utf-8',
                dataType: "json",
                success: function (result) {
                    layer.closeAll('loading');
                    if (result.code == 0) {
                        layer.msg("新密码已发送至您的邮箱...", {icon: 6});
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                },
                error: function () {
                    layer.closeAll('loading');
                    layer.msg("服务器异常", {icon: 2});
                }
            });
            zylVerCode();
            return false;
        });

        form.on('submit(register)', function (data) {
            layer.load();
            $.ajax({
                type: "POST",
                url: "register",
                data: JSON.stringify(data.field),
                contentType: 'application/json;charset=utf-8',
                dataType: "json",
                success: function (result) {
                    layer.closeAll('loading');
                    if (result.code == 0) {
                        window.location.href = "index.html";
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                },
                 error: function () {
                    layer.closeAll('loading');
                    layer.msg("服务器异常", {icon: 2});
                }
            });
            return false;
        });

        form.verify({
            username: function (value, item) {
                if(value.length<6||value.length>18||!/^[0-9a-zA-Z_]{1,}$/.test(value)){
                    return '输入6~18个字符，字母、数字、下划线';
                }
                var msg;
                $.ajax({
                    type: "GET",
                    url: 'register/' + value,
                    async: false, // 使用同步的方法
                    dataType: 'json',
                    success: function (result) {
                        if (result.code != 0) {
                            msg = "用户已注册";
                        }
                    }
                });
                return msg;
            },
            exitEmail: function (value, item) {
                var msg;
                $.ajax({
                    type: "GET",
                    url: 'register/email/' + value,
                    async: false, // 使用同步的方法
                    dataType: 'json',
                    success: function (result) {
                        if (result.code != 0) {
                            msg = "邮箱已被使用";
                        }
                    }
                });
                return msg;
            },
            zylVerCode: function (value, item) {
                if(value !== $(".zylVerCode").text().toLowerCase()){
                    return "验证码错误";
                }
            },
            password: function (value, item) {
                if(value.length<6||value.length>16){
                    return '输入6~16个字符，区分大小写';
                }
            }
        });

        // 发送验证码
        window.sendEmailCode = function (obj) {
            var email = $("#register-email").val();
            var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if(email.match(reg)){
                obj.setAttribute("disabled", true);
                obj.value="重新发送(60)";
                // 倒计时
                var countdown = 59;
                var interval = setInterval(function() {
                    if (countdown == 0) {
                        obj.removeAttribute("disabled");
                        obj.value="获取验证码";
                        countdown = 59;
                        clearInterval(interval);
                    } else {
                        obj.setAttribute("disabled", true);
                        obj.value="重新发送(" + countdown + ")";
                        countdown--;
                    }
                }, 1000);
                // 请求后台
                $.ajax({
                    type: "GET",
                    url: "register/email/code",
                    data: {"email": email}
                });
            }else{
                $("#register-email").focus().addClass("layui-form-danger");
                 layer.msg('邮箱格式不正确', {icon: 5, anim: 6});
            }
        };

        window.zylVerCode = function (len){
            len = len || 4;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';//默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
            var maxPos = $chars.length;
            var zylCode = '';
            for (i = 0; i < len; i++) {
                zylCode += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            $(".zylVerCode").text(zylCode);
        };

        $(function(){
            zylVerCode();
        });
    });
</script>
</body>
</html>